<template>
  <div class="about-conainer" v-loading="isLoading || !srcLoaded">
    <iframe
      class="about-content"
      :src="src"
      frameborder="0"
      @load="srcLoaded = true"
    ></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      srcLoaded: false
    }
  },
  computed:{
    isLoading(){
      return this.$store.state.about.isLoading;
    },
    src(){
      return this.$store.state.about.data;
    }
  },
  async created() {
    this.$store.dispatch("about/fetchData");
  },
}
</script>

<style lang="less" scoped>
.about-conainer{
  width: 100%;
  height: 100%;
  iframe{
    width: 100%;
    height: 100%;
  }
}
</style>